<template>
    <div class="pannel" ref="_pannel" @scroll="infinitLoading">
        <ul>
            <li :key='item.key' v-for="item in items">
                <div class="u-thumb-pannel">
                    <router-link :to="{name:'article',params:{id:item.id}}">
                        <div class="msg">
                        <h2 class="title">{{item.name}}</h2>
                        <div class="tip">
                            <span>{{item.createtime}}</span>
                        </div>
                    </div>
                    </router-link>
                </div>
            </li>
        </ul>
        <van-loading class="icon-loding" type="spinner" color="black" v-if="loaded"/>
        <p class="loaded" v-else>已加载完毕</p>
    </div>
</template>
<script>
import {RequestGet} from '@/api/http.js'

export default {
    beforeCreate(){
        RequestGet({url:'http://test.keoconf.com/mobile/category/getnewslist',val:{type:'notice',page:1}})
        .then(res=>{
            console.log(res.data.data)
            this.items = res.data.data
        })
    },
    data:function(){
        return{
            loadingIcon: 40, //滚动加载发生的距离
            items:[],
            loaded: true,
            page: 1,
        }
    },
    methods:{
        infinitLoading(){
            if(this.$refs._pannel.scrollTop+this.$refs._pannel.clientHeight > this.$refs._pannel.scrollHeight-this.loadingIcon){
                //加载下一页
                var getdata = this.throttle(function(e) {
                    RequestGet({url:'http://test.keoconf.com/mobile/category/getnewslist',val:{type:'notice',page:++this.page}})
                    .then(res=>{
                        if(res.data.data.length === 0){this.page--;this.loaded = false;return}
                        this.items = [...this.items,...res.data.data]
                    })
                    .catch(err=>console.log(err))
                },1000);
                getdata()
            }
        },
        throttle(fn, threshhold = 500) {
            let context = this;
            return function () {
                let args = arguments;
                clearTimeout(context.throttleTimer)
                context.throttleTimer = setTimeout(function () {
                    fn.apply(context, args)
                }, threshhold);
            }
        }
    }
}
</script>

